import { defineComponent, ref, } from "vue";
import { NGrid, NGi, NH1, NText, NDescriptions, NDescriptionsItem, NSwitch, NRadio, NRadioGroup, NRadioButton,} from "naive-ui"
import Maincontainer from "@/components/maincontainer";
export default defineComponent({
    name: "baseset",
    setup() {
        const formValue = ref({
            showfile: false,
        })
        return () => (<Maincontainer>
            <NGrid x-gap={5} y-gap={5}>
                <NGi span={24} class="p-4">
                    <NDescriptions label-placement={"left"} column={1} v-slots={{
                        header: () => <NH1 prefix={"bar"} class="text-base">
                            <NText type="primary">
                                文件管理
                            </NText>
                        </NH1>
                    }}>
                        <NDescriptionsItem v-slots={{ label: () => <span class="w-120px  inline-block text-right">显示隐藏文件</span> }} content-style={{ "display": "inline-flex", "align-content": "center" }}>
                            <NSwitch v-model={[formValue.value.showfile, "value"]} />
                            <span class="ml-2 text-gray-500 text-opacity-50">隐藏文件:以.开头的文件,及系统后台设置的隐藏文件名; 开启后隐藏文件会显示;</span>
                        </NDescriptionsItem>
                        <NDescriptionsItem v-slots={{ label: () => <span class="w-120px  inline-block text-right">开启图片缩略图</span> }} content-style={{ "display": "inline-flex", "align-content": "center" }}>
                            <NSwitch v-model={[formValue.value.showfile, "value"]} />
                            <span class="ml-2 text-gray-500 text-opacity-50">开启后图片浏览体验更佳</span>
                        </NDescriptionsItem>
                        <NDescriptionsItem v-slots={{ label: () => <span class="w-120px  inline-block text-right">开启文件图标勾选</span> }} content-style={{ "display": "inline-flex", "align-content": "center" }}>
                            <NSwitch v-model={[formValue.value.showfile, "value"]} />
                            <span class="ml-2 text-gray-500 text-opacity-50">文件图标的左键勾选，右键菜单的快捷入口</span>
                        </NDescriptionsItem>
                        <NDescriptionsItem v-slots={{ label: () => <span class="w-120px  inline-block text-right">显示文件夹简介</span> }} content-style={{ "display": "inline-flex", "align-content": "center" }}>
                            <NSwitch v-model={[formValue.value.showfile, "value"]} />
                            <span class="ml-2 text-gray-500 text-opacity-50">仅图标模式</span>
                        </NDescriptionsItem>
                        <NDescriptionsItem v-slots={{ label: () => <span class="w-120px  inline-block text-right">打开文件夹方式</span> }} content-style={{ "display": "inline-flex", "align-content": "center" }}>
                            <NRadioGroup v-model={[formValue.value.showfile, "value"]} >
                                <NRadio value={"0"}>通过双击打开</NRadio>
                                <NRadio value={"1"}>通过单击打开</NRadio>
                            </NRadioGroup>
                            <span class="ml-2 text-gray-500 text-opacity-50"></span>
                        </NDescriptionsItem>
                        <NDescriptionsItem v-slots={{ label: () => <span class="w-120px  inline-block text-right">同名文件处理</span> }} content-style={{ "display": "inline-flex", "align-content": "center" }}>
                            <NRadioGroup v-model={[formValue.value.showfile, "value"]} >
                                <NRadio value={"0"}>覆盖</NRadio>
                                <NRadio value={"1"}>重命名</NRadio>
                                <NRadio value={"2"}>跳过</NRadio>
                            </NRadioGroup>
                            <span class="ml-2 text-gray-500 text-opacity-50"></span>
                        </NDescriptionsItem>
                        <NDescriptionsItem v-slots={{ label: () => <span class="w-120px  inline-block text-right">显示模式</span> }} content-style={{ "display": "inline-flex", "align-content": "center" }}>
                            <NRadioGroup v-model={[formValue.value.showfile, "value"]} >
                                <NRadio value={"0"}>适用于所有文件夹</NRadio>
                                <NRadio value={"1"}>适用于单个文件夹</NRadio>
                            </NRadioGroup>
                            <span class="ml-2 text-gray-500 text-opacity-50">为每个文件夹选择视图模式，或对所有文件夹使用相同的视图模式</span>
                        </NDescriptionsItem>
                        <NDescriptionsItem v-slots={{ label: () => <span class="w-120px  inline-block text-right">排序方式</span> }} content-style={{ "display": "inline-flex", "align-content": "center" }}>
                            <NRadioGroup v-model={[formValue.value.showfile, "value"]} >
                                <NRadio value={"0"}>适用于所有文件夹</NRadio>
                                <NRadio value={"1"}>适用于单个文件夹</NRadio>
                            </NRadioGroup>
                            <span class="ml-2 text-gray-500 text-opacity-50">为每个文件夹配置列排序顺序，或对所有文件夹使用相同的顺序</span>
                        </NDescriptionsItem>
                    </NDescriptions>
                </NGi>
                <NGi span={24} class="p-4">
                    <NDescriptions label-placement={"left"} column={1} v-slots={{
                        header: () => <NH1 prefix={"bar"} class="text-base">
                            <NText type="primary">
                                其他设置
                            </NText>
                        </NH1>
                    }}>
                        <NDescriptionsItem v-slots={{ label: () => <span class="w-120px  inline-block text-right">开启回收站  </span> }} content-style={{ "display": "inline-flex", "align-content": "center" }}>
                            <NSwitch v-model={[formValue.value.showfile, "value"]} />
                            <span class="ml-2 text-gray-500 text-opacity-50">开启后删除会移到回收站,建议开启</span>
                        </NDescriptionsItem>
                        <NDescriptionsItem v-slots={{ label: () => <span class="w-120px  inline-block text-right">开启动画  </span> }} content-style={{ "display": "inline-flex", "align-content": "center" }}>
                            <NSwitch v-model={[formValue.value.showfile, "value"]} />
                            <span class="ml-2 text-gray-500 text-opacity-50">窗口打开等动画,操作不流畅时可以考虑关闭</span>
                        </NDescriptionsItem>
                        <NDescriptionsItem v-slots={{ label: () => <span class="w-120px  inline-block text-right">开启音效</span> }} content-style={{ "display": "inline-flex", "align-content": "center" }}>
                            <NSwitch v-model={[formValue.value.showfile, "value"]} />
                            <span class="ml-2 text-gray-500 text-opacity-50">打开文件、删除文件、清空回收站等操作音效</span>
                        </NDescriptionsItem>
                    </NDescriptions>
                </NGi>
                <NGi span={24} class="p-4">
                    <NDescriptions label-placement={"left"} column={1} v-slots={{
                        header: () => <NH1 prefix={"bar"} class="text-base">
                            <NText type="primary">
                                其他设置
                            </NText>
                        </NH1>
                    }}>
                        <NDescriptionsItem v-slots={{ label: () => <span class="w-120px  inline-block text-right">主题样式</span> }} content-style={{ "display": "inline-flex", "align-content": "center" }}>
                            <NRadioGroup v-model={[formValue.value.showfile, "value"]} style={"margin-top:-5px;"}>
                                <NRadioButton value={"0"} size={"small"}>浅色</NRadioButton>
                                <NRadioButton value={"1"} size={"small"}>深色</NRadioButton>
                                <NRadioButton value={"2"} size={"small"}>自动</NRadioButton>
                            </NRadioGroup>
                            <span class="ml-2 text-gray-500 text-opacity-50">自动代表跟随系统</span>
                        </NDescriptionsItem>
                    </NDescriptions>
                </NGi>
            </NGrid>
        </Maincontainer>)
    }
})

